<template>
	<div class="bill">
		<div class="contentRight2">
			<div>
				<div class="rightSearchBlock" style>
					<div class="rightSearchBlock-head">
						<div class="title">{{ $route.name }}</div>

					</div>
					<div class="flex-row rightSearchBlock-search">
						<div class="search-item flex-row flex-alignCenter">
							<div class="key">上游商户名称：</div>
							<el-input v-model="searchList.channelMchtName" placeholder="" size="small" />
						</div>
						<div class="search-item flex-row flex-alignCenter">
							<div class="key">上游商户号：</div>
							<el-input v-model="searchList.channelMchtNo" placeholder="" size="small" />
						</div>
						<div class="search-item flex-row flex-alignCenter">
							<div class="key">状态：</div>
							<el-select clearable size="small" filterable v-model="searchList.state" placeholder="">
								<el-option label="可用" :value="1"> </el-option>
								<el-option label="临时停用" :value="2"> </el-option>
								<el-option label="注销" :value="3"> </el-option>
							</el-select>
						</div>
						<!-- <div class="search-item flex-row flex-alignCenter">
							<div class="key">创建时间</div>
							<el-date-picker v-model="date" type="datetimerange" value-format="yyyy-MM-dd" @change="dateChange" range-separator="至" size="small" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</div> -->

					</div>

					<div class="rightSearchBlock-search">
						<el-button size="small" @click="search" type="primary" style="height: 34px">
							<div class="flex-center">
								<img src="@/assets/icon/search.png" class="button-icon" alt />
								查询
							</div>
						</el-button>
						<el-button class size="small" @click="clear" type>
							<div class="flex-center">
								<img src="@/assets/icon/reset.png" class="button-icon" alt />
								重置
							</div>
						</el-button>
					</div>
					<!-- <el-button type="primary" @click="jumpAdd">添加员工</el-button> -->
				</div>
				<div class="tableContent">
					<div class="table-bettonGroup flex-alignCenter flex-row">
						<el-button size="small" @click="handleAdd" type="primary" style="height: 34px">
							<div class="flex-center">
								<i class="el-icon-plus button-icon" />
								新增
							</div>
						</el-button>
						<!-- <el-button size="small" @click="batchDel('docGoodsDetailDTOList', idList)" type="danger" style="height: 34px">
							<div class="flex-center">
								<i class="el-icon-delete button-icon" />
								批量删除
							</div>
						</el-button> -->
						<!-- <el-button size="small" @click="export_channelMcht" type="warning">
							<div class="flex-center">
								<img src="@/assets/icon/dc.png" class="button-icon" alt />
								导出
							</div>
						</el-button> -->
					</div>
					<!-- 表格 -->
					<div>
						<el-table row-key='id' :data="tableData.list" :show-summary='false' :summary-method="getSummaries" @selection-change="handleSelectionChange" style="width: 100%">
							<el-table-column type="selection" width="60"> </el-table-column>
							<el-table-column prop="channelMchtName" label="上游商户名称"></el-table-column>
							<el-table-column prop="channelMchtNo" label="上游商户号"></el-table-column>
							<el-table-column prop="todayUseNum" label="今日使用次数"></el-table-column>
							<el-table-column prop="maxAmount" label="最大金额(分)"></el-table-column>
							<el-table-column prop="createTime" label="创建时间"></el-table-column>
							<!-- <el-table-column prop="updateTime" label="更新时间"></el-table-column> -->
							<el-table-column prop="state" label="状态">
								<template slot-scope="scope">
									<div>
										{{ scope.row.state==1?'可用':scope.row.state==2?'临时停用':'注销' }}
									</div>

								</template>
							</el-table-column>
							<el-table-column align="center" label="操作" width="auto" fixed="right">
								<template slot-scope="scope">
									<div class="flex-row">
										<!-- <el-button type="primary" size="small" @click="handleUpdate2(scope.row)" style="margin-right: 10px">
											查看
										</el-button> -->
										<el-button type="primary" size="small" @click="handleUpdate(scope.row)" style="margin-right: 10px">
											编辑
										</el-button>
										<el-popconfirm title="确定删除吗？" placement="top" @confirm="del(scope.row)">
											<el-button slot="reference" size="small" type="danger" style="margin-right: 10px">
												删除
											</el-button>
										</el-popconfirm>

									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- 分页 -->
					<div v-if="tableData.totalCount" class="block" style="margin-top: 10px; text-align: right">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchList.pageNum" :page-size="searchList.pageSize" layout="sizes,total, prev, pager, next, jumper" :page-sizes="[7, 20, 30, 40]" :total="Number(tableData.totalCount)"></el-pagination>
					</div>
				</div>
			</div>
		</div>
		<!-- 确认信息弹框 -->
		<el-dialog title="确认信息" :visible.sync="dialogFormVisible" width='70%'>
			<div id="addContract" style="max-height: 50vh; overflow-y: scroll">
				<div class="meTable">
					<div class="meTableHead flex-alignCenter">合同信息</div>
					<div class="meTableContent">
						<div class="tr flex-row">
							<div class="cell50 flex-row">
								<div class="key">公司分组名称</div>
								<div class="value">{{ listDetail.companyGroupName }}</div>
							</div>
							<div class="cell50 flex-row">
								<div class="key">卖方公司名称</div>
								<div class="value">{{ listDetail.companyName }}</div>
							</div>
						</div>
						<div class="tr flex-row">
							<div class="cell50 flex-row">
								<div class="key">合同号</div>
								<div class="value">{{ listDetail.contractCode }}</div>
							</div>
							<div class="cell50 flex-row">
								<div class="key">金额</div>
								<div class="value">{{ listDetail.amount }}</div>
							</div>
						</div>
						<div class="tr flex-row">
							<div class="cell50 flex-row">
								<div class="key">原产地国</div>
								<div class="value">{{ listDetail.originalCountry }}</div>
							</div>
							<div class="cell50 flex-row">
								<div class="key">付款方式</div>
								<div class="value">{{ listDetail.paymentType }}</div>
							</div>
						</div>

						<div class="tr flex-row">
							<div class="cell50 flex-row">
								<div class="key">合同电子文件</div>
								<div class="value">{{ listDetail.attachmentsCount }}</div>
							</div>
							<div class="cell50 flex-row">
								<div class="key">预保状态</div>
								<div class="value">{{ listDetail.preInsuranceStatus }}</div>
							</div>
						</div>
						<div class="tr flex-row">
							<div class="cell50 flex-row">
								<div class="key">扣尺方法</div>
								<div class="value">{{ listDetail.deductionMethod }}</div>
							</div>
							<div class="cell50 flex-row">
								<div class="key">单据要求</div>
								<div class="value">
									<div class="clickText" style="text-align: left;" @click="
                      showUpload(JSON.parse(listDetail.contractBillRequireJson))
                    ">
										{{listDetail.billRequiredCount }}
									</div>
								</div>
							</div>
						</div>
						<div class="tr flex-row">
							<div class="cell50 flex-row">
								<div class="key">其他条款</div>
								<div class="value">{{ listDetail.otherClauseCount }}</div>
							</div>
						</div>
						<div class="tr flex-row">
							<div class="cell100 flex-row">
								<div class="key">备注</div>
								<div class="value">{{ listDetail.remarks }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="addContract-block">
					<div class="meTableHead flex-alignCenter flex-between">
						<div>商品明细</div>
					</div>
					<el-table :data="listDetail.contractGoodsList" style="width: 100%" border>
						<el-table-column prop="goodsType" label="商品类型"></el-table-column>
						<el-table-column prop="goodsName" label="商品名称" :width="
                flexColumnWidth('goodsName', listDetail.contractGoodsList)
              "></el-table-column>
						<el-table-column prop="volume" label="体积" :width="
                flexColumnWidth('volume', listDetail.contractGoodsList)
              ">
							<template slot-scope="scope">
								{{ scope.row.volume }}{{ scope.row.volumeUnit }}
							</template>
						</el-table-column>
						<el-table-column prop="weight" label="重量" :width="
                flexColumnWidth('weight', listDetail.contractGoodsList)
              ">>
							<template slot-scope="scope">
								{{ scope.row.weight }}{{ scope.row.weightUnit }}
							</template>
						</el-table-column>
						<el-table-column prop="unitPrice" label="单价" :width="
                flexColumnWidth('unitPrice', listDetail.contractGoodsList)
              "></el-table-column>
						<el-table-column prop="pricingMethod" label="计价方式"></el-table-column>
						<el-table-column prop="loadingMethod" label="装运方式"></el-table-column>
						<el-table-column prop="quantity" label="根数"></el-table-column>
						<el-table-column prop="containerQuantity" label="货柜数"></el-table-column>
						<el-table-column prop="containerSize" label="货柜尺寸"></el-table-column>
						<el-table-column prop="deductionMethod" label="扣尺方法"></el-table-column>
						<el-table-column prop="amount" label="小计金额" :width="
                flexColumnWidth('amount', listDetail.contractGoodsList)
              "></el-table-column>
					</el-table>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm_channelMcht(listDetail)">确 定</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 确认信息弹框 end -->
		<!-- 添加或修改 -->
		<el-dialog :title="title" :visible.sync="open" :close-on-click-modal='false' width="50%" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="auto">

				<el-row>
					<el-col :span="12">
						<el-form-item label="上游商户名称" prop="channelMchtName" required>
							<el-input v-model="form.channelMchtName" placeholder="请输入" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="上游商户号" prop="channelMchtNo" required>
							<el-input v-model="form.channelMchtNo" placeholder="请输入" />
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="最大金额(分)" prop="maxAmount" required>
							<el-input v-model="form.maxAmount" type="number" placeholder="请输入" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="state" required>
							<el-select clearable size="small" filterable v-model="form.state" placeholder="">
								<el-option label="可用" :value="1"> </el-option>
								<el-option label="临时停用" :value="2"> </el-option>
								<el-option label="注销" :value="3"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>
			<div slot="footer" class="dialog-footer" v-if="title !='查看'">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import Uploads from '@/components/common/uploads';
import LookTable from '@/components/common/lookTable';

export default {
	components: {
		Uploads,
		LookTable,
	},
	data() {
		return {
			// 表单校验
			rules: {
				parentId: [
					{
						required: true,
						message: '上级部门不能为空',
						trigger: 'blur',
					},
				],
			},
			title: '',
			date: '',
			date2: '',
			tableData: { list: [{}] }, // 表格
			form: {},
			listDetail: {},
			// 遮罩层
			loading: true,
			dialogFormVisible: false,
			open: false, // 是否显示弹出层
			searchList: {
				pageNum: 1,
				pageSize: 7,
			},
		};
	},
	created() {
		let userList = window.localStorage.userInformation
			? JSON.parse(window.localStorage.userInformation)
			: '';
		this.userList = userList;
		this.getData();
	},
	methods: {
		/** 查看按钮操作 */
		handleUpdate2(row) {
			this.reset();
			this.$myApi.get_channelMcht(row.uuid).then((res) => {
				if (res.code == 200) {
					this.form = res.result;
					this.open = true;
					this.title = '查看';
				}
			});
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			this.$myApi.get_channelMcht(row.uuid).then((res) => {
				if (res.code == 200) {
					this.form = res.result;
					this.open = true;
					this.title = '修改';
				}
			});
		},
		handleSelectionChange(val) {
			if (val) {
				console.log(val);
				var idList = [];
				val.map((item) => {
					idList.push(item.uuid);
				});
				this.idList = idList;
			}
		},
		batchDel(name, idArr) {
			console.log(name, idArr);
			this.$confirm('是否确认删除所选数据, 删除后不可恢复', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then((e) => {
					var params = {
						uuids: this.idList,
					};
					this.$myApi.delbatch_channelMcht(params).then((res) => {
						if (res.code == 200) {
							this.$message({
								type: 'info',
								message: '删除成功',
							});
							this.getData();
						}
					});
				})
				.catch((e) => {
					console.log(this, e);
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		/** 提交按钮 */
		submitForm: function () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.uuid != undefined) {
						this.$myApi
							.update_channelMcht(this.form)
							.then((res) => {
								if (res.code == 200) {
									this.$message({
										type: 'info',
										message: '修改成功',
									});
									this.open = false;
									this.getData();
								}
							});
					} else {
						this.$myApi.add_channelMcht(this.form).then((res) => {
							if (res.code == 200) {
								this.$message({
									type: 'info',
									message: '新增成功',
								});
								this.open = false;
								this.getData();
							}
						});
					}
				}
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm('form');
		},
		/** 新增按钮操作 */
		handleAdd(row) {
			this.reset();
			if (row != undefined) {
				this.form.parentId = row.deptId;
			}
			this.open = true;
			this.title = '新增';
		},

		dateChange(r) {
			console.log(r);

			this.searchList.createTimes = r[0]+','+r[1];
			// this.searchList.createDateStart = r[0];
			// this.searchList.createDateEnd = r[1];
		},

		/**
		 * 点击新增
		 */
		handelAdd: function () {
			this.$refs.AddComp.show();
		},

		del(row) {
			const params = [row.id];
			this.$myApi.del_channelMcht(row.uuid).then((res) => {
				if (res.code == 200) {
					this.$message.success('操作成功');
					this.getData();
				}
			});
		},

		jump(adress, query) {
			this.$router.push({ path: adress, query: query });
		},

		//搜索按钮
		search() {
			this.searchList.pageNum = 1;
			this.getData();
		},
		//重置按钮
		clear() {
			// Object.assign(this.$data.searchList, this.$options.data().searchList); //用原始data里的对象替代现有对象
			this.searchList = this.$options.data().searchList;
			this.date = '';
			this.getData();
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}
				if (column.label != '金额') {
					//合计部分
					return;
				}
				const values = data.map((item) =>
					Number(item[column.property])
				);
				if (!values.every((value) => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					// sums[index] += ' 元';
					sums[index] = sums[index].toFixed(2);
				} else {
					// sums[index] = 'N/A';
				}
			});
			// console.log(sums);

			return sums;
		},

		//列表
		getData(pageNum) {
			this.$myApi.list_channelMcht(this.searchList).then((res) => {
				if (res.code == 200) {
					this.tableData = res.result;
				}
			});
		},
		//分页选择每页多少条
		handleSizeChange(val) {
			this.searchList.pageSize = val;
			this.getData();
		},
		//分页当前页
		handleCurrentChange(val) {
			this.searchList.pageNum = val;
			this.getData();
		},
	},
};
</script>
<style scoped>
.green {
	color: green;
}
.red {
	color: red;
}
.gray {
	color: gray;
}
.billHead {
	box-sizing: border-box;
	width: 100%;
	padding: 30px 0px 20px 30px;
	background: #f8f8f8;
	padding-top: 80px;
}
.billHead2 {
	box-sizing: border-box;
	width: 100%;
	background: #f8f8f8;
	padding: 13px 0 0 25px;
	position: fixed;
	top: 49px;
	z-index: 100;
}
.input1 {
	width: 200px;
}
.margin20 {
	margin-left: 20px;
}
.button1 {
	height: 30px;
	padding: 0 10px;
}

.button5 {
	width: 45px;
	height: 30px;
	padding: 0;
	color: #409eff;
	border: 1px solid #409eff;
}
.button2 {
	width: 70px;
	height: 30px;
	padding: 0;
	position: absolute;
	right: 100px;
	bottom: 20px;
}
.button6 {
	width: 70px;
	height: 30px;
	padding: 0;
	color: #409eff;
	border: 1px solid #409eff;
	position: absolute;
	right: 20px;
	bottom: 20px;
}
.content img {
	height: 30px;
	width: 30px;
}
.content .time {
	font-size: 12px;
	margin-bottom: 20px;
}
.content .red {
	color: red;
}
#page2 .content {
	box-sizing: border-box;
	padding: 30px;
	padding-top: 120px;
}
#page2 .state,
#page3 .state {
	box-sizing: border-box;
	background: #f8f8f8;
	height: 185px;
	width: 275px;
	padding: 10px;
}
#page2 .state img,
#page3 .state img {
	height: 47px;
	width: 47px;
	margin-top: 10px;
}
#page2 .title,
#page3 .title {
	width: 100%;
	font-size: 12px;
	font-weight: 600;
}
#page2 .text1,
#page3 .text1 {
	color: #ff6e6e;
	font-size: 17px;
	font-weight: 500;
	margin-top: 10px;
}
#page2 .text2,
#page3 .text2 {
	margin-top: 10px;
	font-size: 12px;
}
.primary {
	position: relative;
	width: calc(100% - 295px);
	box-sizing: border-box;
	background: #f8f8f8;
	margin-left: 20px;
	height: 185px;
	padding: 10px 25px;
}
.primaryContent {
	margin-top: 30px;
	font-size: 12px;
	color: #767676;
}
.primaryContent .block1 div:not(:first-child) {
	margin-top: 10px;
}
.primaryContent .block2 div:not(:first-child) {
	margin-top: 10px;
}
.primaryContent .block2 {
	margin-left: 85px;
}
#page3 .content {
	padding: 30px;
	padding-top: 120px;
}
#page3 .top {
	box-sizing: border-box;
	width: 100%;
	height: 125px;
	padding: 12px 25px;
	background: #f8f8f8;
}
.blue {
	color: #2f9ceb;
	cursor: pointer;
}
.el-dropdown-link {
	cursor: pointer;
	color: #409eff;
}
.el-icon-arrow-down {
	font-size: 12px;
}
.scrollView {
	max-height: 400px;
	width: 100%;
	overflow-y: scroll;
}
</style>


